import { useEffect, useState } from 'react'

const URL = 'http://geek.itheima.net/v1_0/channels'

function UseEffect() {
	const [list, setList] = useState([])

	// useEffect 组件挂载时，可以执行一些副作用操作，比如发送 Ajax 请求，更改DOM等操作
	useEffect(() => {
		const fetchData = async () => {
			const response = await fetch(URL)
			const data = await response.json()
			setList(data.data.channels)
		}

		fetchData()
	}, []) // 空数组作为useEffect的第二个参数，意味着只在组件挂载时执行一次。

	return (
		<>
			<h2>useEffect使用案例</h2>
			<ul>
				{list.map((item) => (
					<li key={item.id}>{item.name}</li>
				))}
			</ul>
		</>
	)
}

export default UseEffect
